<template>
  <div class="app-container">
    <div class="end-container">
      <!-- 顶部 -->
      <div class="status-header">
        <!-- 关闭-跳转 -->
        <div class="close-btn" @click="goLiveSetting">
          <el-icon><CloseBold /></el-icon>
        </div>
        <h2 class="end-title">直播已结束</h2>
        <div class="streamer-info">
          <img src="@/assets/register/default_avator.png" class="avatar" />
          <div class="time-info">
            <span class="text">巅峰对决所</span>
            <p class="time">直播时间：2024/09/15 14:30:20-2024/09/15 17:50:30</p>
            <p class="time">直播时长：3时20分</p>
          </div>
        </div>
      </div>
      <!-- 底部收益信息 -->
      <div class="stats-container">
        <div class="stats-grid">
          <div v-for="(item, index) in statsData" :key="index" class="stat-item">
            <!-- <div class="stat-value">{{ item.value }}</div> -->
            <div class="stat-value">
              {{ item.value }}
              <img
                v-if="['守护水晶收益', '点歌收益', '礼物收益'].includes(item.label)"
                src="@/assets/dashboard/crystal.png"
                class="icon"
              />
            </div>
            <div class="stat-label">{{ item.label }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
export default {
  name: "livingEnd",
};
</script>
<script setup lang="ts">
// import { useRouter } from "vue-router";
const statsData = [
  { value: "152人", label: "新增关注" },
  { value: "368个", label: "新增水晶" },
  { value: "2个", label: "送礼人数" },
  { value: "50%", label: "礼物分成" },
  { value: "2,396人", label: "在线人数峰值" },
  { value: "345", label: "守护水晶收益" },
  { value: "453", label: "点歌收益" },
  { value: "231", label: "礼物收益" },
];
const updateStatus = inject("updateStatus");
const goLiveSetting = () => {
  updateStatus(2);
};
</script>

<style lang="scss" scoped>
.end-container {
  width: 100%;
  height: 100vh;
  background: linear-gradient(180deg, #f0f5ff 0%, #fbfcfe 100%);
  box-shadow:
    inset 2px 1px 2px 1px #ffffff,
    0px 4px 8px 0px #eaf0ff;
  border-radius: 30px;
}
.status-header {
  text-align: center;
  .close-btn {
    position: absolute;
    right: 150px;
    top: 100px;
    z-index: 1;
    font-size: 15px;
  }

  padding: 91px 479px;

  .end-title {
    min-width: 300px;
    font-weight: 500;
    font-size: 32px;
    color: #1d2129;
    letter-spacing: 24px;
    margin-bottom: 72px;
  }

  .streamer-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    .avatar {
      width: 120px;
    }

    .time-info {
      text-align: left;
      .text {
        font-weight: 500;
        font-size: 18px;
        color: #1d2129;
      }
      .time {
        font-size: 14px;
        color: #4e5969;
        min-width: 400px;
      }
    }
  }
}

.stats-container {
  max-width: 1200px;
  margin: 0 auto;
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 24px;
    padding-bottom: 24px;

    .stat-item {
      text-align: center;
      padding: 12px;

      .stat-value {
        font-weight: 900;
        font-size: 20px;
        color: rgba(0, 0, 0, 0.898);
        font-weight: 500;
        margin-bottom: 6px;
        .icon {
          width: 15px;
        }
      }

      .stat-label {
        font-size: 15px;
        color: #86909c;
      }
    }
  }

  .earning-box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;

    .bottom-stat-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px;
      border-radius: 8px;

      .stat-value {
        color: #1664ff;
        font-size: 18px;
        font-weight: 500;
      }

      .stat-label {
        color: #666;
        font-size: 14px;
      }
    }
  }
}
</style>
